<template>
  <div class="header">
    <div class="sahngjji" @click="sahngjjies">商家入驻请点击</div>
    <div class="header_con">
      <div class="logo">
        <h1>
          <img src="@/assets/1.png" alt="">
        </h1>
      </div>
      
      <div class="inputsuo">
        
        <img src="@/assets/img/c1.png" alt="">
        <input placeholder="请选择">
        <div class="search_a">搜索</div>
      </div>
    </div>
    <div class="list_a">
      <div class="ist_l">
        <ul>
          <li class="efmo_amf" ><router-link to='/'>首页</router-link></li>
          <li class="oueng_iwn" ><router-link to='/experience'>免费体验</router-link> </li>
          <li ><router-link to='/guessing'>价格竞猜</router-link></li>
          <li><router-link to='/products'>新品预定</router-link></li>
          <li><router-link to='/Interaction'>云享社区</router-link></li>
          <li class="golingwe"><router-link to='/core'>个人中心</router-link></li>
          <!-- <div v-if="open" class="ist_c">
            <li><router-link to='/business'>商家中心</router-link></li>
            <li><router-link to='/core'>个人中心</router-link></li>
          </div> -->
          <!-- <div class="ist_r">
            <div class="ist_r2" @click="SignIn">登录</div>
            <div class="ist_r2" @click="register">注册</div>
          </div>  -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      isActive: false,
      open:true,
      tokenState:false,
    }
  },
  created(){
    
  },
  methods:{
      sahngjjies(){
        this.$router.push({path:'/merchantSignIn'}) 
      }
  } 
}
</script>

<style scoped lang="stylus">
.logo img{
    width: 270px;
    height: 47px;
    margin-top: 10px;
}
.header_con {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inputsuo {
  width: 360px;
	height: 39px;
	border-radius: 20px;
	border: solid 2px #f06048;
  display: flex;
  justify-content: space-between;
  input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    border-radius: 20px;
    margin-left: 30px;
    font-size: inherit;
    height: 36px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 70%;
  }
  img {
    width 24px
    height 24px
    position relative
    top 8px
    left 11px 
  }
}
.inputsuo .search_a {
  width: 62px;
	height: 33px;
	background-color: #f06048;
	border-radius: 16px;
  color #fff;
  font-style 21px
  text-align center
  line-height 33px
  margin-top 3px
  margin-right 3px
  cursor:pointer;
}
.router-link-exact-active{
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.list_a {
  height 50px
  width 1200px
  margin 0 auto
  display: flex;
  justify-content: space-between;
  li {
    float left
    width 126px
    height 50px
    line-height 50px
    text-align center
    background-color #fff
    border-radius 4px
    font-size 24px
    color #000
    a {
      color #000
    }
  }
}
.ist_r {
  width 250px;
  padding-left 300px
  display: flex;
  justify-content: space-between;
}
.ist_r2:hover{
  width: 106px;
	height: 42px;
	background-color: #f3806d;
	border-radius: 21px;
  font-size 24px
  line-height 42px
  color #fff
  text-align center
  cursor pointer
}
.ist_r2{
	width: 106px;
	height: 42px;
  line-height: 42px;
	border-radius: 21px;
	border: solid 2px #f3806d;
  font-size 24px
  color #000
  text-align center
}
.ist_c {
  width 251px
  height 50px
  display flex
  justify-content space-between
  padding-left 300px
}
.ist_c div {
  width 126px
  height 50px
  line-height 50px
  text-align center
  background-color #fff
  border-radius 4px
  font-size 24px
  color #000
}
.ist_c div a {
  background-color:#fff
}
.ist_c div a:hover {
  color #000
}
.sahngjji {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: 17px;
    right: -62px;
    width: 1000px;
    margin: 0 auto;
    height: 11px;
    font-size: 14px;
    color: #17016b;
    cursor pointer
}
.sahngjji:hover{
  color #f06048
}
.golingwe {
  margin-left 410px
}
</style>
